<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery操作Html元素属性(一)——基本属性操作</title>
    <style type="text/css">
        .selected{
            background-color: red;
            border: 5px solid lawngreen;
        }

        .test{
            width: 500px;
            height: 100px;
        }
    </style>
</head>
<body>
    <fieldset>
        <legend>jQuery操作Html元素属性示例(一)——操作Img</legend>
        <img src="img/1_注册页面A.png" id="img">
        <button id="btnChangeImg">改变图片</button>
        <button id="btnRemoveImg">删除图片</button>
    </fieldset>
    <fieldset>
        <legend>jQuery操作Html元素属性示例(二)——操作文本框</legend>
        <input type="text" id="txt" placeholder="请输入。。。">
        <button id="btn1">改变placeholder的属性值</button>
        <button id="btn2">删除placeholder的属性</button>
        <button id="btn3">让文本框不可用</button>
        <button id="btn4">操作文本框class属性</button>
        <button id="btn5">重置文本框</button>
    </fieldset>
</body>

<!--引入jQuery的js文件-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    /**
     * $(function(){
     *      //页面加载完成后的处理，固定写法
     * });
     *
     */
    $(function () {
        var imgSrc = $("#img").attr("src"); //获取id为img的src属性值
        console.log(imgSrc);

        $("#btnChangeImg").click(function () {
            //改变id为img的src属性值
            $("#img").attr("src","img/2_手机号密码登录.png");
        });

        $("#btnRemoveImg").click(function () {
            //删除id为img的src属性
            $("#img").removeAttr("src");
        });

        $("#btn1").on("click",function () {
            //改变id为txt的placeholder属性值
            $("#txt").attr("placeholder","NYL，我52001314");
        });

        $("#btn2").on("click",function () {
            //删除id位txt的placeholder属性
            $("#txt").removeAttr("placeholder");
        });

        $("#btn3").on("click",function () {
            //改变id位txt的disabled属性
            //$("#txt").attr("disabled",true);//设置文本框不可用
            $("#txt").attr("disabled","disabled");//这种方式也可以
        });
        $("#btn4").on("click",function () {
            //改变id位txt的class属性
            //$("#txt").attr("class","selected");
            $("#txt").attr("class","selected test");//可以给class属性设置多个样式的值，中间用空格隔开
        });
        $("#btn5").on("click",function () {
            //链式调用
            $("#txt")
            .attr("disabled",false)
            .attr("placeholder","请输入。。。")
            .removeAttr("class");
        });
    });
    
</script>
</html>